<template>
    <div>
        <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
        </el-tag>
        <el-autocomplete ref="saveTagInput" v-if="inputVisible" class="inline-input" v-model="inputValue"
            :fetch-suggestions="querySearch" placeholder="请输入内容" @keyup.enter.native="handleInputConfirm"
            @select="handleSelect" size="small"></el-autocomplete>
        <el-button v-else-if="(!inputVisible && isMany) || (!inputVisible && !isMany && dynamicTags.length === 0)"
            class="button-new-tag" size="small" @click="showInput">点击输入</el-button>
    </div>
</template>
<style>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>

<script>
export default {
    props: {
        isMany: {
            type: Boolean,
            default: false
        },
        managerList: {
            type: Array,
            default: []
        },
        remark: {
            type: String,
            default: "老师"
        },
    },
    data() {
        return {
            dynamicTags: [], // 数据集 名称
            dynamicTagsId: [], // 数据集 id
            inputVisible: false, // 是否显示输入框
            inputValue: '', // 输入框的值
            managerListNext: [], // next

        };
    },
    created() {
        this.initManageList()
    },
    methods: {
        // 初始化下拉列表
        initManageList() {
            // 老师 admin_xyls
            // 学院秘书 admin_xyms
            // 学院院长 admin_yz
            // 学院书记 admin_sj
            switch (this.remark) {
                case "老师":
                    this.managerListNext = this.managerList.filter(item => item.roleKey === "admin_xyls")
                    break;
                case "学院院长":
                    this.managerListNext = this.managerList.filter(item => item.roleKey === "admin_yz")
                    break;
                case "学院书记":
                    this.managerListNext = this.managerList.filter(item => item.roleKey === "admin_sj")
                    break;
                default:
                    break;
            }
            // this.managerListNext = this.managerList.filter(item => item.remark === this.remark)
            // console.log('=========this.managerListNext===========================');
            // console.log(this.managerListNext);
            // console.log('====================================');
        },
        querySearch(queryString, cb) {
            var managerList = this.managerListNext;
            var results = queryString ? managerList.filter(this.createFilter(queryString)) : managerList;
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        // 删除
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            const result = this.managerListNext.find(item => item.value === tag)
            this.dynamicTagsId.splice(this.dynamicTagsId.indexOf(result.id), 1);
            this.initBack() 
        },
        // 显示输入框
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        // 初始化状态
        initBack() {
            this.$emit("tagCHange", this.dynamicTagsId)
            this.inputVisible = false;
            this.inputValue = '';
        },
        // 用户通过 注入到数据集
        _result(v) {
            const result = this.managerListNext.find(item => item.value === v)
            if (result) {
                this.dynamicTags.push(result.value);
                this.dynamicTagsId.push(result.id);
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            } else {
                this.$message({
                    type: 'error',
                    message: '未找到哦!'
                });
            }
            this.initBack()
        },
        // 下拉注入
        handleSelect(target) {
            this.inputValue = ""
            this._result(target.value)
        },
        // 把输入框的值注入到数据集
        handleInputConfirm() {
            if (this.inputValue) {
                this._result(this.inputValue)
            }
        }
    }
}
</script>